﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <title></title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="http://hpneo.github.io/gmaps/gmaps.js" type="text/javascript"></script>
    <link href="http://hpneo.github.io/gmaps/styles.css" rel="stylesheet" type="text/css" />



    <script type="text/javascript">
        var map;

        $(document).on("pageinit", "#pagina1", function (event) {

            $("#Button1").click(function () {
                map = new GMaps({
                    div: '#map',
                    zoom: 13,
                    lat: -12.043333,
                    lng: -77.028333

                });

                GMaps.geolocate({
                    success: function (position) {
                        map.setCenter(position.coords.latitude, position.coords.longitude);
                        map.addMarker({
                            lat: position.coords.latitude,
                            lng: position.coords.longitude,
                            title: 'keviN',
                            draggable: true,
                            dragend: function (e) {
                               
                                map.createPanorama({
                                    el: '#map',
                                    lat: position.coords.latitude,
                                    lng: position.coords.longitude
                                });
                            },
                            infoWindow: {
                                content: '<p>Mi Ubicacion</p>'
                            }
                        })
                    },
                    error: function (error) {
                        alert('Geolocation failed: ' + error.message);
                    },
                    not_supported: function () {
                        alert("Your browser does not support geolocation");
                    },
                    always: function () {
                       
                    }
                });

                map.addMarker({
                    lat: 10.47694,
                    lng: -73.25056,
                    title: 'Marker with InfoWindow',
                    draggable: true,
                    dragend: function (e) {

                        map.createPanorama({
                            el: '#map',
                            lat: 10.47694,
                            lng: -73.25056
                        });
                    },
                    infoWindow: {
                        content: '<p>VALLEDUPAR</p>'
                    }
                });

                map.addMarker({
                    lat: 10.46680,
                    lng: -73.25056,
                    title: 'Marker with InfoWindow',
                    infoWindow: {
                        content: '<p>VALLEDUPAR</p>'
                    }
                });

            });

        });
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>

    <div data-role="page" id="pagina1">
        <div id="cabeza">

        </div>
        <div data-role="content" data-theme="a">
            <input id="Button1" type="button" value="Buscar Restaurantes" />
            <div id="map"></div>
        </div>
        <div data-role="footer">

</body>
</html>
